<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        #app{
            width: 600px;
            height: 600px;
            background-color: red;
            margin: 50px auto;
        }


        .box{
            width: 400px;
            height: 400px;
            background-color: blue;
            margin: 50px auto;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        这是根组件:{{title}}
        <hello :title="title" :a="a" :b="b" :c="c" :d="d" :e="e"></hello>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>

        Vue.component('world',{
            props:['title','a','b','c','d','e'],
            created(){
                console.log(this.$attrs);//获取到所有的参数对象
            },
            template:`<div class="box2">这是World 孙子组件: -  {{title}} <button>修改数据</button></div>`
        })

        // Vue.component('hello',{
        //     props:['title','a','b','c','d','e'],
        //     template:`<div class="box">
        //         这是hello 子组件 : - {{ title }}
        //         <world :title="title" :a="a" :b="b" :c="c" :d="d" :e="e"></wrold>
        //     </div>`
        // })

        //使用 $attrs 绑定传值数据    
        Vue.component('hello',{
            // props:['title'],
            template:`<div class="box">
                这是hello 子组件 : - {{ this.$attrs.title }}
                <world v-bind="this.$attrs"></world>
            </div>`,
            created(){
                console.log(this.$attrs);// this.$attrs 返回当前组件中所有的传递的参数对象
            }
        })


        //vm 就是根组件
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据
                title:'这是根组件的数据',
                a:'aaaaa',
                b:'bbbbb',
                c:'ccccc',
                d:'dddddd',
                e:'eeeeee'
            },
            methods:{//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>
</html>